<template>
  <el-dialog
    v-model="isVisible"
    :align-center="layout.alignCenter ?? true"
    :width="layout.width ?? '30%'"
    :show-close="layout.showClose ?? true"
    :close-on-click-modal="layout.closeOnClick ?? false"
    @close="cancelClick"
  >
    <template #header>
      <div class="header">
        <div class="line"></div>
        <div class="title">{{ layout.title }}</div>
      </div>
    </template>
    <ly-form
      ref="formRef"
      :page-name="pageName"
      :is-edit-btn="isEditBtn"
      :form="form"
    >
      <template
        v-for="item in form.items"
        :key="item.prop"
        v-slot:[item.slotName]="formItem"
      >
        <slot
          v-if="item.slotName"
          v-bind="formItem"
          :name="item.slotName"
        ></slot>
      </template>
    </ly-form>
    <template #footer>
      <div class="footer">
        <el-button size="default" @click="cancelClick">取消</el-button>
        <el-button size="default" type="primary" @click="confirmClick">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import LyForm from '@/base-ui/lyform/ly-from.vue'
import useModal from '@/hooks/use-modal'
import type { IDialogAndDrawerLayout, ILyForm } from '@/global/types'

interface IProps {
  isShowModal: boolean
  pageName?: string
  layout: IDialogAndDrawerLayout
  form: ILyForm
  isEditBtn?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  isShowModal: false,
  isEditBtn: false
})
const emits = defineEmits(['cancelClick', 'confirmClick'])
const { isVisible, formRef, cancelClick, confirmClick } = useModal(props, emits)

// import { ref, watchEffect } from 'vue'
// import LyForm from '@/base-ui/lyform/ly-from.vue'
// import type { IDialogAndDrawerLayout, ILyForm } from '@/global/types'
// import type { FormInstance } from 'element-plus'
//
// interface IProps {
//   isShowModal: boolean
//   pageName: string
//   layout: IDialogAndDrawerLayout
//   form: ILyForm
// }
//
// const props = withDefaults(defineProps<IProps>(), {
//   isShowModal: false
// })
//
// const isVisible = ref(props.isShowModal)
// watchEffect(() => {
//   isVisible.value = props.isShowModal
// })
//
// const formRef = ref<FormInstance>()
//
// // 定义事件
// const emits = defineEmits(['cancelClick', 'confirmClick'])
//
// // 取消按钮
// const cancelClick = () => {
//   emits('cancelClick')
// }
// // 确认按钮
// const confirmClick = () => {
//   const formData = formRef.value?.getFormData()
//   emits('confirmClick', formData)
// }
</script>

<style scoped lang="less">
:global(.el-dialog__header) {
  background-color: #f4f9ff;
  margin-right: 0;
  text-align: left;
}

:global(.el-dialog__headerbtn) {
  top: -2px;
  right: -6px;
}

:global(.el-dialog__footer) {
  background-color: #f4f9ff;
  padding: 10px;
}

:deep(.el-button) {
  border-radius: 0;
  padding: 5px 24px;
  font-size: 12px;
  height: 28px;
  line-height: 1;
  margin: 0 20px;
}

.header {
  display: flex;

  .line {
    width: 3px;
    height: 16px;
    margin-right: 10px;
    background-color: var(--ly-primary-color);
  }

  .title {
    height: 16px;
    line-height: 16px;
    font-size: 14px;
  }
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
